<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="app">
        <blog-post post-title="hello"></blog-post>
        <blog-post post-title="My journey with Vue"></blog-post>
        <blog-post v-bind:title="post.title"></blog-post>
    </div>

    <!-- 传入一个数字: -->
    <blog-post v-bind:likes="42"></blog-post>
    <blog-post v-bind:likes="post.likes"></blog-post>

    <!-- 传入一个布尔值 -->
    <blog-post favorited></blog-post>
    <base-input v-bind:favorited="false">
    <base-input v-bind:favorited="post.currentUserFavorited">

    <!-- 传入一个数组 -->
    <blog-post v-bind:comment-ids=["234,266,273"]></blog-post>
    <blog-post v-bind:comment-ids="post.commentIds"></blog-post>

    <!-- 传入一个对象 -->
    <blog-post v-bind:comments="{ id: 1, title: 'My Journey with Vue'}"></blog-post>
    <blog-post v-bind:post="post"></blog-post>

    <!-- 传入一个对象的所有属性 -->
    <blog-post v-bind="post"></blog-post>
    <blog-post
        v-bind:id="post.id"
        v-bind:title="post.title"
    ></blog-post>

    <!-- 单向数据流 -->
    <!-- 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：
    父级 prop 的更新会向下流动到子组件中，但是反过来则不行。 -->

    <base-input
        v-model="username"
        class="username-input"
        placeholder="Enter your username"
    ></base-input>
</body>
<script src="./vue.js"></script>
<script src="main.js"></script>
</html>